<template>
  <section class="searchAction">
    <!-- <div>
      <img src="local-media://icons/p_add.png" alt="" s="0">
      <img src="local-media://icons/p_add_s.png" alt="" s="1">
      <span>添加朋友/群组</span>
    </div>
    <span>|</span> -->
    <div @click="createGroupChat">
      <img src="local-media://icons/q_add.png" alt="" s="0">
      <img src="local-media://icons/q_add_s.png" alt="" s="1">
      <span>创建群聊</span>
    </div>
  </section>
</template>
<script>
import { defineComponent } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup () {
    const store = useStore()
    const createGroupChat = () => {
      store.commit('saveSearchType', 2)
      store.commit('saveDialogState', true)
    }
    return {
      createGroupChat
    }
  }
})
</script>

<style scoped lang="less">
.searchAction {
  display: flex;
  align-items: center;
  padding: 10px 30px;
  padding-left: 33px;
  align-self: flex-start;

  >span {
    margin: 0 10px;
  }

  >div {
    display: flex;
    align-items: center;
    cursor: pointer;

    &:hover {
      color: #01e0eb;

      >img[s='0'] {
        display: none;
      }

      >img[s='1'] {
        display: inline-block;
      }
    }

    >img {
      width: 16px;
      height: 16px;
      margin-right: 5px;

      &[s='1'] {
        display: none;
      }
    }

    font-size: 14px;
    font-weight: 400;
    color: #242424;
  }
}
</style>
